<template>
  <div class="filter_box">
    <nut-popup v-model:visible="props.isEventsPopup" position="right" style="width: 80%; height: 100%" @click-overlay="closedOverlay">
      <div class="game_title">
        <!-- <img src="/imgs/club/game.png" alt=""> -->
        <span>{{ t('club_page_sssx') }}</span>
      </div>
      <div class="body vertical center body_sec">
        <nut-form label-position="top" ref="formRef" class="">
           <!-- 活动时间 -->
           <div class="play_mode1">
              <label class="play_mode_label">{{ t('club_page_hdsj') }}</label>
              <div class="play_mode_container">
                <div
                  v-for="mode in modes6"
                  :key="mode.label"
                  class="play_mode_item"
                  :class="{ 'play_mode_item--active': selectedMode6 === mode.id }"
                  @click="selectMode6(mode)"
                >
                  <span>{{ mode.label }}</span>
                </div>
              </div>
            </div>
            <!-- 每桌人数上限 -->
            <div class="play_mode1">
              <label class="play_mode_label">{{ t('club_page_hdsssx')}}</label>
              <div class="play_mode_container">
                <div
                  v-for="mode in modes7"
                  :key="mode.label"
                  class="play_mode_item"
                  :class="{ 'play_mode_item--active': selectedMode7 === mode.id }"
                  @click="selectMode7(mode)"
                >
                  <span>{{ mode.label }}</span>
                </div>
              </div>
            </div>
          <!-- 按钮 -->
          <div class="btn_zone flex">
            <nut-button
              class="submit_btn button_color pointer"
              :disabled="loading"
              block
              @click="onSubmit"
            >
              {{ t('btn_label_submit') }}
            </nut-button>
          </div>  
        </nut-form>
      </div>
    </nut-popup>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';

import { useI18n } from "vue-i18n";
const { t } = useI18n();

const props: any =  defineProps({
  isEventsPopup: {
    type: Boolean,
    default: false,
  },
  close: {
    type: Function,
    required: true,
  },
  isType: {
    type: Number,
    default: 49
  },
});

const emit = defineEmits(['submit']);

const startTime = reactive({
  year: 0, 
  month: 0, 
  day: 0, 
  hour: 0, 
  minute: 0, 
  second: 0
})
const endTime = reactive({
  year: 0, 
  month: 0, 
  day: 0, 
  hour: 0, 
  minute: 0, 
  second: 0
})

// 活动时间
const selectedMode6 = ref(0);
const modes6 = ref([
  { label: t('club_page_all'), enabled: true, id: 0 },
  { label: t('club_page_today'), enabled: true, id: 1 },
  { label: t('club_page_tomorrow'), enabled: true, id: 2 },
  { label: t('club_page_seven'), enabled: true, id: 3 },
]);

const formatDate = (date: Date) => ({
  year: date.getFullYear(),
  month: date.getMonth() + 1, // 月份从 0 开始，需要加 1
  day: date.getDate(),
  hour: 0,
  minute: 0,
  second: 0,
});

const selectMode6 = (mode: { id: number; enabled: boolean }) => {
  if (!mode.enabled) return;

  selectedMode6.value = mode.id;
  const now = new Date();

  switch (mode.id) {
    case 0: // 全部
      Object.assign(startTime, { year: 0, month: 0, day: 0, hour: 0, minute: 0, second: 0 });
      Object.assign(endTime, { year: 0, month: 0, day: 0, hour: 0, minute: 0, second: 0 });
      break;

    case 1: // 今日
      Object.assign(startTime, formatDate(now));
      const tomorrow = new Date(now);
      tomorrow.setDate(tomorrow.getDate() + 1);
      Object.assign(endTime, formatDate(tomorrow));
      break;

    case 2: // 明日
      const tomorrowStart = new Date(now);
      tomorrowStart.setDate(tomorrowStart.getDate() + 1);
      Object.assign(startTime, formatDate(tomorrowStart));
      const dayAfterTomorrow = new Date(tomorrowStart);
      dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 1);
      Object.assign(endTime, formatDate(dayAfterTomorrow));
      break;

    case 3: // 近七天
      Object.assign(startTime, formatDate(now));
      const sevenDaysLater = new Date(now);
      sevenDaysLater.setDate(sevenDaysLater.getDate() + 7);
      Object.assign(endTime, formatDate(sevenDaysLater));
      break;

    default:
      Object.assign(startTime, { year: 0, month: 0, day: 0, hour: 0, minute: 0, second: 0 });
      Object.assign(endTime, { year: 0, month: 0, day: 0, hour: 0, minute: 0, second: 0 });
      break;
  }
};


// 每桌人数上限
const selectedMode7 = ref(0);
const modes7 = ref([
  { label: t('club_page_all'), enabled: true, id: 0 },
  { label: 'SNG', enabled: true, id: 1 },
  { label: 'MTT', enabled: true, id: 2 },
]);
const selectMode7 = (mode: { id: number; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  selectedMode7.value = mode.id;
};

const loading = ref(false); // 是否提交中

const closedOverlay = () => {
  props.close();
  selectedMode6.value = 0
  selectedMode7.value = 0
}

const onSubmit = () => {
  handleSubmit();
};

const handleSubmit = () => {
  const form = {
    start_time: startTime, // 游戏类型
    end_time: endTime, // 游戏类型
    tournament_type: selectedMode7.value, // 游戏类型
  }
  emit("submit", form);
  props.close();
  selectedMode6.value = 0
  selectedMode7.value = 0
}
</script>

<style scoped lang="scss">
.filter_box {
  .body {
    padding: 0 14px;

    form {
      :deep(.nut-cell-group__wrap) {
        box-shadow: none;
        background: none;
        margin: 0;

        .nut-cell {
          background: none;
          padding: 0 !important;
          margin-bottom: 16px;
          &.last_item {
            margin-bottom: 10px;
            .h {
              margin-bottom: 10px;
            }
          }
          &::after {
            border: none;
          }

          &.nut-form-item {
            .nut-form-item__label {
              padding-bottom: 8px;
              color: #fff;
              font-size: 14px;
              // font-weight: 500;
            }
            .nut-input,
            .select_dis {
              width: 100%;
              background: #1d1c3c;
              border: 1px solid #333260;
              box-shadow: 0.5px 0.5px 1px 0 #333260 inset;
              border-radius: 8px;
              padding: 9px 10px;

              .s-icon {
                width: 24px;
                height: 24px;
                background: url(/imgs/inputSuffix.webp) center no-repeat;
                background-size: 100%;
                transition: 0.3s;
              }

              &.active {
                .s-icon {
                  transform: rotate(180deg);
                }
              }
              .nut-menu__title-text {
                padding: 0;
              }
            }

            .usdt_box {
              justify-content: space-between;
              margin-top: 10px;

              .button {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }

  .body_sec {
    height: 93%;
    position: relative;
    .yh_item {
      :deep(.nut-form-item__body__slots) {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .nut-input{
          width: 120px !important;
        }
      }
    }
    .yh_item1 {
      :deep(.nut-form-item__body__slots) {
        .play_mode {
      // margin-top: 20px;

          .play_mode_label {
            display: block;
            margin-bottom: 10px;
            color: #fff;
            font-size: 14px;
          }

          .play_mode_container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 24px;
          }

          .play_mode_item {
            width: calc(50% - 5px);
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 8px;
            background: #1D1C3C;
            box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
            font-size: 14px;
            color: #fff;
            font-size: 14px;
            font-weight: 400;
            position: relative;
            flex: 0 0 calc(50% - 5px);

            &--active {
              background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%), var(---, #1D1C3C);
              box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
              color: #fff;
            }
          }
        }
        .play_amount {
          display: flex;
          justify-content: space-around;
          align-items: center;
        }

        .nut-input{
          width: 120px !important;
        }
      }
    }
    .play_mode {
      // margin-top: 20px;

      .play_mode_label {
        display: block;
        margin-bottom: 10px;
        color: #fff;
        font-size: 14px;
      }

      .play_mode_container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 24px;
      }

      .play_mode_item {
        width: calc(33.33% - 10px);
        height: 40px;
       
        text-align: center;
        border-radius: 8px;
        background: #1D1C3C;
        box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
        font-size: 14px;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        position: relative;
        flex: 0 0 calc(33.33% - 10px);

        p:nth-child(1) {
          margin-top: 2px;
        }
        p:nth-child(2) {
          color: #A8A8CA;
        }
        span {
          line-height: 40px;
        }
        &--active {
          background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%), var(---, #1D1C3C);
          box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
          p {
            color: #fff !important;
          }
        }
      }
    }

    .play_mode1 {
      // margin-top: 20px;

      .play_mode_label {
        display: block;
        margin-bottom: 10px;
        color: #fff;
        font-size: 14px;
      }

      .play_mode_container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 24px;
      }

      .play_mode_item {
        min-width: calc(33.33% - 10px);
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 8px;
        background: #1D1C3C;
        box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
        font-size: 14px;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        position: relative;
        padding:  0 8px;

        &--active {
          background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%), var(---, #1D1C3C);
          box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
          color: #fff;
        }
      }
    }

    .btn_zone {
      position: absolute;
      bottom: 38px; 
      left: 26px;
      z-index: 99;
      .submit_btn {
        margin: 32px auto 8px;
        border: 0;
        width: 248px;
        height: 44px;
        color: #fff;
        border-radius: 8px;

        &.fixed_bg {
          background-size: 100% 112%;
        }
      }
    }
  }
  :deep(.nut-popup) {
    background: #100E26;

    .game_title {
      margin: 40px 0 12px 14px;
      img {
        width: 24px;
        height: 24px;
        display: inline-block;
        vertical-align: top;
      }
      span {
        color: #FFF;
        text-align: center;
        font-family: "PingFang SC";
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
}

</style>